<template>
	<view class="wrapper">
    <view class="main">
      <view class="menu">
        <v-menu :menu="cache.firstLevel" :current="currentMenuIndex" @clickMenu="clickMenu" />
      </view>
      <view class="right">
        <!--<swiper :swiper="cache.swiper" />-->
        <view class="swiper" v-if="true">
          <!-- 放在组件中会有问题, 像是生命周期单号  -->
          <swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500">
            <swiper-item
                v-for="(item, index) in cache.swiper"
                :key="index"
                class="swpier-item"
            >
              <view class="image" @click="clickSwiper(item)">
                <image mode="widthFix" :src="baseUrl + item.image.path" v-if="item.image"></image>
              </view>
            </swiper-item>
          </swiper>
        </view>
        <view class="list">
          <!--<list :list="list" />-->
          <view class="item" v-for="(item, index) in list" :key="index" @click="goDetail(item)">
            <view class="image" v-if="item.mainImage">
              <!--<image width="100rpx" height="100rpx" mode="widthFix" :src="baseUrl + item.mainImage.path" />-->
              <u--image width="150rpx" height="150rpx" mode="widthFix" lazy-load :fade="true" duration="450" :src="baseUrl + item.mainImage.path"></u--image>
            </view>
            <view class="desc">
              <view class="title two-lines">{{ item.title }}</view>
              <!--<group v-if="item.area && item.area[0] && item.area[0].area_id === 5"-->
              <!--       :price="parseFloat(item.price)" :group-price="parseFloat(item.price_group)" class="price" />-->
              <price :price="parseFloat(item.price)" :old-price="parseFloat(item.price_old)" class="price" />
              <view class="set" v-if="false">
                <view class="d">购买省:￥{{ setMyself(item) }}</view>
                <view class="d">分享赚:￥{{ setReferrer(item) }}</view>
              </view>
              <!--<view class="sell">已售: {{ item.sell_count }}</view>-->
            </view>
          </view>
        </view>
        <view @click="moreProduct" class="more" v-if="list.length > 0 && false">点击查看更多</view>
        <view class="b"></view>
      </view>
    </view>
    <v-tab :selected="'/pages/category/index'" />
  </view>
</template>

<script>
import Price from '../../components/price/index'
import Group from '../../components/price/group'
import Tab from '../../components/tab'
import color from '@/config/color.js'
import base64 from '../../util/base64'
import Product from '../../api/product'
import Menu from './components/Menu'
// import Swiper from './components/Swiper'
import List from './components/List'
import config from '../../config/config'
const productModel = new Product()
const key = 'category-current'
	export default {
    components: {
      'v-menu': Menu,
      // Swiper,
      List,
      'v-tab': Tab,
      Price,
      Group
    },
		data() {
			return {
        activeColor: color.main_color,
        list: [],
        currentMenuIndex: 0,
        cache: {
          menu: [],
          list: []
        },
        selectId: 0,
        baseUrl: config.baseUrl,
        set: {}
			}
		},
    // 分享
    onShareAppMessage(res) {
      return {
        // title: '快递熊小二',
        path: '/pages/index/index?scene=' +
            (this.$store.getters['User/info'] ? this.$store.getters['User/info'].id : 0),
        // 这里还可以定义图片
        // imageUrl: '',
      }
    },
		onLoad(options) {
      uni.hideTabBar({
        animation: false,
        success: () => {

        },
        fail: () => {

        }
      })
      // console.log('on load')
      if (options.id) {
        this.selectId = options.id
      }
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: this.activeColor,
        animation: {
          duration: 400,
          timingFunc: 'easeIn'
        }
      })
      productModel.getSet().then(response => {
        let { data } = response
        data = base64.parse(data)
        console.log(data)
        this.set = data.set
      })
      this.fetchData()
    },
    onShow() {
      // this.fetchData()
    },
    onPullDownRefresh() {
      this.currentMenuIndex = 0
      this.fetchData()
    },
		methods: {
      // 产品
      goDetail(item) {
        uni.navigateTo({
          url: `/sub_product/detail/index?id=${item.id}`
        })
      },
      setMyself(v) {
        return +(v.price * this.set.buy_myself / 100).toFixed(2)
      },
      setReferrer(v) {
        return +(v.price * this.set.buy_referrer / 100).toFixed(2)
      },
		  // 获取数据
		  fetchData() {
        productModel.categoryPage().then(response => {
          let { data } = response
          data = base64.parse(data)
          this.cache = data
          this.firstSelect()
          uni.stopPullDownRefresh();
        })
      },
      // 一级子菜单
      firstSelect() {
		    let item = this.cache.firstLevel[0]
        this.getList(item.id)
        // if (this.selectId === 0) {
        //   this.list = [...this.cache.firstChildren]
        // } else {
        //   this.cache.firstLevel.forEach((v, i) => {
        //     if (+v.id === +this.selectId) {
        //       this.clickMenu({
        //         item: v,
        //         index: i
        //       })
        //     }
        //   })
        // }
      },
      // 点击菜单
      clickMenu(v) {
        const { item, index } = v
        this.currentMenuIndex = index
        uni.setStorageSync(key, index)
        const id = item.id
        this.getList(id)
      },
      // 获取对应产品
      getList(id) {
        productModel.getOneProduct({ parent_id: id }).then(response => {
          let { data } = response
          data = base64.parse(data)
          this.list = [...data.list]
          console.log(this.list)
        })
      },
      clickSwiper(item) {
        // console.log(item)
        if (item.url) {
          uni.navigateTo({
            url: item.url
          })
        }
      },
      // 更多分类产品
      moreProduct() {
        const item = this.cache.firstLevel[this.currentMenuIndex]
        // console.log(item)
        uni.navigateTo({
          url: `/sub_product/category/index?id=${item.id}`
        })
      },

		}
	}
</script>

<style lang="scss" scoped>
.b {
  height: 100rpx;
}
$swiper_height: 210rpx;
.main {
  display: flex;
  justify-content: space-between;
  .list {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      .image {
        width: 160rpx;
        display: flex;
        align-items: center;
      }
      .desc {
        flex: 1;
        .title {
          font-weight: 700;
        }
        .set {
          display: flex;
          .d {
            font-size: 24rpx;
            margin-right: 10px;
          }
        }
      }
    }
  }
  .menu {
    width: 200rpx;
    background: #f7f8f9;
    //position: absolute;
    //top: 0;
    //bottom: 0;
    height: 100vh;
  }
  .right {
    flex: 1;
    padding: 20rpx;
    //background: black;
    .swiper {
      height: $swiper_height;
      .image {
        //background: red;
        height: $swiper_height;
        border-radius: 10rpx;
        overflow: hidden;
        image {
          width: 100%;
          height: 100%;
          display: block;
          margin: auto;
        }
      }
    }
    .more {
      //font-size: 24rpx;
      padding: 0 20rpx;
      height: 25px;
      margin-top: 10px;
      background: #f3f5f7;
      color: $main_color;
      border-radius: 10rpx;
      display: flex;
      align-items: center;
    }
  }
}
</style>
